<template>
    <div class="orderView">
        <header>
            <van-nav-bar title="确认订单">
                <template #left>
                    <van-icon name="arrow-left" @click="$router.back()" size="20" color="black" />
                </template>
            </van-nav-bar>
        </header>
        <router-link tag="nav" to="/address">
            <div class="top">
                <p><van-tag type="danger" v-if="orderInfo.isDefault">默认</van-tag> <van-tag type="primary">学校</van-tag> {{ orderInfo.province }}{{ orderInfo.city }}{{ orderInfo.county }}</p>
            </div>
            <div class="center">
                <strong>{{ orderInfo.addressDetail }}</strong><van-icon name="arrow" color="#666" size="12" />
            </div>
            <div class="bottom">
                <p>{{ orderInfo.name }} <strong>{{ orderInfo.tel }}</strong></p>
            </div>
            <ul class="user_border">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </router-link>
        <main>
            <div class="orderList" v-for="item in orderList" :key="item.proid">
                <div class="store"><van-icon name="shop" color="#666" size="14" />嗨购商城专卖店</div>
                <div class="info">
                    <div class="imgInfo"><img :src="item.img1" alt=""></div>
                    <div class="textInfo">
                        <div class="title"><p class='van-ellipsis'>{{ item.proname }}</p></div>
                        <div class="model">12400F/RTX3060/500G SSD</div>
                        <div class="price"><p><i>￥</i>{{ item.originprice | setPriceInt }}<i>.{{ item.originprice | setPriceFloat }}</i></p><p class="weight_num">10.000kg × {{ item.num }}</p></div>
                        <div class="fuli"><van-tag plain type="danger">支持7天无理由退货</van-tag><van-tag plain type="danger">15天保价</van-tag></div>
                    </div>
                </div>
            </div>
            <div class="action">
                <div class="allprice"><p><i>￥</i>{{ allPrice | setPriceInt }}<i>.{{ allPrice | setPriceFloat }}</i></p></div>
                <button @click="payment">在线支付</button>
            </div>
        </main>
    </div>
</template>
<style lang="stylus" scoped>
.orderView
    display flex
    flex-direction column
    height 100%
    overflow auto
    background-color rgb(245,245,245)
    padding-bottom 4.375rem
    main
        display flex
        flex 1
        flex-direction column
        .action
            position fixed
            background-color white
            height 3.75rem
            display flex
            padding .625rem .9375rem
            bottom .625rem
            width 100%
            box-sizing border-box
            justify-content space-between
            align-items center
            .allprice
                color red
                font-size 1.5rem
                font-weight 600
                i
                    font-style normal
                    font-size 1rem
            button
                width 6.25rem
                height 2.5rem
                background linear-gradient(135deg,#fa2c19 0,#fa3f19 45%,#fa5919 83%,#fa6419 100%)
                color white
                font-weight 600
                border-radius 62.4375rem
                border 0
        .orderList
            display flex
            flex-direction column
            background-color white
            border-radius .9375rem
            margin-top .9375rem
            padding .9375rem
            .store
                font-size .875rem
                color #555
            .info
                display flex
                .imgInfo
                    width 6.25rem
                    height 6.25rem
                    display flex
                    align-items center
                    justify-content center
                    img
                        width 5rem
                        height 5rem
                        border-radius .625rem
                        border 0
                .textInfo
                    display flex
                    flex-direction column
                    flex 1
                    justify-content space-around
                    .title
                        font-size .875rem
                        color #555
                        width 14.375rem
                        p
                            width 100%
                    .model
                        color #999
                        font-size .75rem
                    .price
                        display flex
                        justify-content space-between
                        color red
                        font-size 1rem
                        font-weight 600
                        i
                            font-style normal
                            font-size .75rem
                    .weight_num
                        font-size .75rem
                        color #808080
                    .fuli
                        display flex
    nav
        display flex
        flex-direction column
        background-color white
        padding .9375rem
        position relative
        div
            height 1.625rem
            display flex
            align-items center
        .top
            font-size .875rem
            color #555
        .center
            font-size 1.125rem
            justify-content space-between
        .bottom
            font-size .875rem
        .user_border
            position absolute
            bottom 0
            left 0
            width 100%
            display flex
            overflow hidden
            li
                height: .3125rem
                width 1.5625rem
                background-color: red
                transform: skewX(-30deg)
            li:not(:last-child)
                margin-right .625rem
            li:nth-child(odd)
                background-color #ff7967
            li:nth-child(even)
                background-color #7ca8ff
</style>
<script>
import Vue from 'vue'
import { getDefaultAddress, getList, getDeleteCartItem, getConFirmOrder, getUpDateOrderAddress } from '@/api/Order'
import { Icon, Tag, Toast } from 'vant'
Vue.use(Icon)
Vue.use(Tag)
Vue.use(Toast)
export default {
  data () {
    return {
      orderInfo: [],
      orderList: [],
      allPrice: 0,
      ressId: '',
      userid: '',
      localList: [],
      timeId: ''
    }
  },
  methods: {
    // 在线支付事件
    payment () {
      getDeleteCartItem({ params: { userid: this.userid } }).then((res) => {
        Toast('订单创建成功')
        this.$router.push({ name: 'paymentStop1', params: { allprice: this.allPrice, timeid: this.timeId } })
      })
    },
    setFirmOrder () {
      this.orderInfo.time = this.timeId
      getUpDateOrderAddress(this.orderInfo).then((res) => {
        console.log('设置订单地址')
      })
    }
  },
  mounted () {
    // 获取用户id
    this.userid = this.$store.state.userId
    // 获取创建订单的时间戳
    this.timeId = this.$route.params.timeId
    // 获取是否有选择地址
    this.ressId = this.$route.params.ressId ? this.$route.params.ressId : ''
    // 获取当前订单的商品详情
    getConFirmOrder({ params: { userid: this.userid, time: this.timeId } }).then((res) => {
      if (res.code === '200') {
        // 渲染列表
        this.orderList = res.data
        // 计算总价
        this.allPrice = this.orderList.reduce((pro, dev) => {
          return pro + dev.num * dev.originprice
        }, 0)
      }
    })
    // 获取选择后的地址如果有选择则用展示选择的
    if (this.ressId) {
      getList({ params: { userid: this.userid } }).then((res) => {
        const index = res.data.findIndex(item => item.addressid === this.ressId)
        this.orderInfo = res.data[index]
        this.setFirmOrder()
      })
    } else {
      // 第一次进入当前页面获取默认地址如果有则取默认地址
      getDefaultAddress({ userid: this.userid }).then((res) => {
        if (res.data.length) {
          this.orderInfo = res.data[0]
          this.ressId = res.data[0].addressid
          this.setFirmOrder()
        } else {
          // 没有默认地址则默认选择第一个作为默认地址
          getList({ params: { userid: this.userid } }).then((res) => {
            this.orderInfo = res.data[0]
            this.ressId = res.data[0].addressid
            this.setFirmOrder()
          })
        }
      })
    }
  },
  filters: {
    // 获取总价整数部分
    setPriceInt (val) {
      if (val) {
        return parseInt(val)
      }
    },
    // 获取总价小数部分
    setPriceFloat (val) {
      if (val) {
        return val * 100 % 100 >= 10 ? val * 100 % 100 : '0' + val * 100 % 100
      }
    }
  }
}
</script>
